<template>
  <a-spin :spinning="loading">
    <a-select
      mode="multiple"
      placeholder="请选择用户"
      :labelInValue="true"
      v-bind="$attrs"
      v-model="selectedUser"
      :dropdownMenuStyle="{ display: 'none' }"
      @dropdownVisibleChange="selectUserIds"
      @change="handleChange"
    />
    <p-select-user-list-modal :multiple="multiple" ref="UserListModal" @choseUser="choseUser"/>
  </a-spin>
</template>

<script>
  import { getAction } from '@/api/manage'
  import PSelectUserListModal from '@comp/project/user/modules/PSelectUserListModal'

  export default {
    // 对jeecg选用户组件的二次封装，原来的组件使用即傻逼又不方便，不抽象一下公共逻辑没法复用。
    name: 'PUserSelect',
    components: { PSelectUserListModal },
    props: {
      // id的数组，或是string类型的ids，默认为数组
      value: {
        // eslint-disable-next-line vue/require-prop-type-constructor
        type: String | Array,
        require: true
      },
      multiple: {
        type: Boolean,
        default: true
      },
      // 值类型：1.'array'数组 2.'ids'：ids的字符串
      valType: {
        type: String,
        default: 'array',
        validator: function(value) {
          return ['array', 'ids'].indexOf(value) !== -1
        }
      }
    },
    model: { prop: 'value', event: 'change' },
    data() {
      return {
        loading: false,
        selectedUser: []
      }
    },
    watch: {
      value: {
        immediate: true,
        handler(val) {
          let ids = ''
          if (this.valType === 'ids') {
            ids = val
          } else if (this.valType === 'array') {
            ids = val ? val.join(',') : ''
          }

          if (ids !== this.userIds) {
            this.initData(ids)
          }
        }
      }
    },
    computed: {
      // 用户ids用','分割
      userIds() {
        return this.selectedUser.map(item => item.key).join(',')
      }
    },
    methods: {
      initData(userIds) {
        if (userIds === '' || !userIds) {
          this.selectedUser = []
          return
        }
        this.loading = true
        getAction('/sys/user/queryByIds', { userIds: userIds })
          .then(res => {
            if (res.success && res.result) {
              this.selectedUser = res.result.map(item => ({
                label: item.realname,
                key: item.id
              }))
              this.$nextTick(() => {
                this.$refs.UserListModal.edit(res.result, userIds)
              })
            }
          })
          .finally(() => {
            this.loading = false
          })
      },
      selectUserIds() {
        this.$refs.UserListModal.add(this.selectedUser, this.userIds)
      },
      handleChange(userList) {
        let idList = []
        let users = userList.map(item => {
          idList.push(item.key)
          return {
            id: item.key,
            realname: item.label
          }
        })
        this.changeVal(idList)
        this.$refs.UserListModal.edit(users, this.userIds)
      },
      changeVal(idList) {
        let result = ''
        if (this.valType === 'array') {
          result = idList
        } else if (this.valType === 'ids') {
          result = idList.join(',')
        }
        this.$emit('change', result)
      },
      // 子modal回调
      choseUser: function(userList) {
        let idList = []
        this.selectedUser = userList.map(item => {
          idList.push(item.id)
          return {
            label: item.realname,
            key: item.id
          }
        })
        this.changeVal(idList)
      }
    }
  }
</script>

<style lang="less" scoped></style>
